import React, { Component } from 'react';
import { Steps, Space, Button } from 'antd';
import TheDialog from '@/components/TheDialog'
import { getDateTime3, getDateTime2 } from '@/utils/getDate'

const { Step } = Steps
export default class Logistics extends Component {
  constructor(props) {
    super(props)
    this.state = {
      options: this.props.options,
      logVisible: false,
      courierCode: '',
      courierNo: '',
      logisticsInformation: null
    }
  }
  componentDidMount() {
  }
  onLogistics = async shopOrderId => {
    React.$post(`/management/shopOrderInfo/checkLogistics/${shopOrderId}`).then(response => {
      if (response.code === 0 && response.data) {

        let { msg: { context } } = response.data
        context = context ? context.map(v => {
          let time = v.time * 1000
          time = new Date(parseInt(time))
          time = getDateTime2(time)
          return {
            ...v,
            time
          }
        }) : null
        let courierCode = ""
        let options = this.props.options
        for (let i = 0; i < options.length; i++) {
          if (options[i].value === response.data.courierCode) {
            courierCode = options[i].label
          }
        }
        this.setState({
          courierCode,
          courierNo: response.data.courierNo,
          logisticsInformation: context,
          logVisible: true
        })
      } else {
        return React.$message({
          type: 'info',
          content: '暂无物流信息'
        })
      }
    })
  }
  logDialogCancel = () => {
    this.setState({
      logisticsInformation: null,
      logVisible: false
    })
  }
  render() {
    const { logVisible, courierCode, courierNo, logisticsInformation } = this.state
    return (
      <>
        <TheDialog
          visible={logVisible}
          handleCancel={this.logDialogCancel}
          footer={null}
          title={'跟踪物流'}
        >
          <div style={{ height: 500, overflowY: 'auto' }}>
            {
              <>
                快递公司： {courierCode}
                <div>快递单号：{courierNo}</div>
              </>
            }
            {logisticsInformation &&
              <Steps progressDot current={logisticsInformation.length - 1} direction="vertical">
                {logisticsInformation.map(v => {
                  return <Step title={v.time} description={v.desc} />
                })}
              </Steps>}
            {!logisticsInformation && <span>暂无物流信息</span>}
          </div>
          <Space style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
            <Button type={'primary'} onClick={this.logDialogCancel}>确定</Button>
          </Space>
        </TheDialog>
      </>
    );
  }
}
